<template>
  <div>
    <el-main>
      <div class="form_title">商户信息</div>
      <div class="form_content">
        <el-row :gutter="20">
          <el-col :span="4">
            <p>名称</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.name }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>商户号</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.merchantId }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>私钥文件</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.privateKey }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>商户证书序列号</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.merchantSerialNumber }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>APIv2密钥</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.apiV2Key }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>APIv3密钥</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.apiV3Key }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>状态</p>
          </el-col>
          <el-col :span="20">
            <p v-if="isEdit">{{ Status[model.status]["name"] }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>备注</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.remark }}</p>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer>
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="handleSave"
      >编辑</el-button
      >
    </el-footer>
  </div>
</template>

<script>
  import {getPay} from "@/api/pay/pay";
  import {Status} from "@/utils/constant/status";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        Status,
        isEdit: false,
        model: {
          id: null,
          name: null,
          merchantId: null,
          privateKey: null,
          merchantSerialNumber: null,
          apiV2Key: null,
          apiV3Key: null,
          status: null,
          remark: null
        }
      }
    },
    created() {
      this.get();
    },
    methods: {
      get(){
        const that = this;
        getPay().then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            if(res.data.data){
              that.isEdit = true;
              that.model.id = res.data.data.id;
              that.model.name = res.data.data.name;
              that.model.merchantId = res.data.data.merchantId;
              that.model.privateKey = res.data.data.privateKey;
              that.model.merchantSerialNumber = res.data.data.merchantSerialNumber;
              that.model.apiV2Key = res.data.data.apiV2Key;
              that.model.apiV3Key = res.data.data.apiV3Key;
              that.model.status = res.data.data.status;
              that.model.remark = res.data.data.remark;
            }
          }
        });
      },
      handleSave(){
        this.$router.push({path: "pay-save"});
      }
    }
  }
</script>

<style lang="scss" scoped>
.form_title {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
}
.form_content {
  font-size: 14px;
  padding-right: 16px;
}
.input_suffix {
  display: inline-block;
  padding: 0 6px;
}
.el-divider {
  margin: 6px 0 16px;
}
.add_new_batch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  height: 45px;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  color: #8c939d;
}
.batch_block {
  margin-top: 16px;
}
.batch_block:first-child {
  margin-top: 0;
}
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
